<template>
	<div class="news-index">
		<div class="main_left">
			<!-- 走马灯 -->
			<el-carousel height="230px">
				<el-carousel-item v-for="item in imgList" :key="item.name">
					<img :src="item.src" alt="图片丢失了" :title="item.title">
				</el-carousel-item>
			</el-carousel>
			<!-- 新闻列表 -->
			<div>
				<h3>新闻推荐</h3>
				<div class="news-profile">
					<div v-for="item in list">
						<news-profile v-bind="item" :key="item.id"></news-profile>
					</div>
				</div>
			</div>
		</div>
		<div class="main_right">
			<el-row>
				<el-col :span="18">
					<el-input size="mini" v-model="keywords" placeholder="请输入内容"></el-input>
				</el-col>
				<el-col :span="6">
					<el-button size="mini" style="float: right;">搜索</el-button>
				</el-col>
			</el-row>
			<img src="../../assets/images/search.jpg" alt="图片丢失了" style="height: 20%;width: 100%;">
			<!-- 点击排行 -->
			<div style="display: flex;">点击排行</div>
			<hr>
			<news-sort v-for="(item,index) in list" :num="index+1" :id="item.id" :title="item.title"
				:key="item.id+'a'"></news-sort>
			<hr>
			<!-- 最新新闻 -->
			<div style="display: flex;">最新新闻</div>
			<news-sort v-for="(item,index) in list" :num="index+1" :id="item.id" :title="item.title"
				:key="item.id+'b'"></news-sort>
		</div>
	</div>
</template>

<script>
	import NewsProfile from '../../components/NewsProfile.vue'
	import NewsSort from '../../components/NewsSort.vue'
	import axios from 'axios'
	axios.defaults.baseURL = '/api'
	export default {
		components: {
			NewsProfile,NewsSort
		},
		data() {
			return {
				list: [], //新闻列表
				//走马灯图片列表
				imgList: [{
						name: 'lp01',
						src: new URL('../../assets/images/lp01.jpg', import.meta.url).href,
						title: '图1'
					},
					{
						name: 'lp02',
						src: new URL('../../assets/images/lp02.jpeg', import.meta.url).href,
						title: '图2'
					},
					{
						name: 'lp03',
						src: new URL('../../assets/images/lp03.jpeg', import.meta.url).href,
						title: '图3'
					}
				]
			}
		},
		mounted() {
			//访问后台接口加载新闻列表
			axios.get('news').then(response => {
				//console.log(response.data)
				this.list = response.data
			})
		}

	}
</script>

<style>
	.news-index {
		display: flex;
		margin-left: 24%;
		margin-right: 24%;
	}

	.main_left {
		width: 65%;
		height: 100%;
	}

	.main_right {
		width: 35%;
		height: 100%;
		padding: 0 0 0 .8rem;
	}
</style>